<template>
  <div class="container">
    <div class="topBtn">
      <div class="sizeBig"><span>产品基础信息</span></div>
      <div>
        <el-button type="primary" style="height:36px;" @click="query">
          <i class="icon-qiy" />查询
        </el-button>
        <el-button type="primary" @click.native="add">
          <i class="iconfont icon-addNew" /> 新增
        </el-button>
        <el-button type="primary" icon="el-icon-edit" @click="edit()"
          >修改
        </el-button>
        <el-button type="primary" icon="el-icon-delete" @click="remove"
          >删除
        </el-button>
        <el-button type="primary" style="height:36px;" @click="Enable">
          <i class="icon-qiy" />启用
        </el-button>
        <el-button type="primary" style="height:36px;" @click="forbidden">
          <i class="icon-close" />禁用
        </el-button>
      </div>
    </div>
    <div class="message">
      <p class="character">
        对车间进行新增查改等常规操作<span class="skip">查看帮助文档</span>
      </p>
    </div>
    <!-- 筛选 -->
    <div class="flex ml">
      <div class="flex">
        <el-input
          v-model="search"
          placeholder="请输入内容"
          style="width: 200px;margin-right: 20px"
          suffix-icon="el-icon-search"
        />
      </div>
      <div class="flex">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <el-table :data="tableData" class="laytable" border>
      <el-table-column fixed type="selection" align="center" width="50" />
      <el-table-column
        type="index"
        :index="indexMethod"
        align="center"
        label="序号"
        width="50"
      />
      <el-table-column
        prop="ProductId"
        align="center"
        :show-overflow-tooltip="true"
        label="产品ID"
        width="150"
      />
      <el-table-column
        prop="Name"
        align="center"
        :show-overflow-tooltip="true"
        label="产品名"
        width="150"
      />
      <el-table-column
        prop="Code"
        align="center"
        :show-overflow-tooltip="true"
        label="编码"
        width="150"
      />
      <el-table-column
        prop="CategoricalId"
        align="center"
        :show-overflow-tooltip="true"
        label="产品分类"
        width="150"
      />
      <el-table-column
        prop="ProductType"
        align="center"
        :show-overflow-tooltip="true"
        label="产品类型"
        width="150"
      />
      <el-table-column
        prop="ProductShopType"
        align="center"
        :show-overflow-tooltip="true"
        label="输出类型"
        width="150"
      />
      <el-table-column
        prop="ProductSize"
        align="center"
        :show-overflow-tooltip="true"
        label="产品尺寸"
        width="150"
      />
      <el-table-column
        prop="Describe"
        align="center"
        :show-overflow-tooltip="true"
        label="产品描述"
        width="200"
      />
      <el-table-column
        prop="CreateBy"
        align="center"
        :show-overflow-tooltip="true"
        label="创建人"
        width="200"
      />
      <el-table-column
        prop="CreateTime"
        align="center"
        :show-overflow-tooltip="true"
        label="创建时间"
        width="200"
      />
      <el-table-column
        prop="LastModifyBy"
        :show-overflow-tooltip="true"
        align="center"
        label="修改人"
        width="200"
      />
      <el-table-column
        prop="LastModifyTime"
        align="center"
        :show-overflow-tooltip="true"
        label="修改时间"
        width="150"
      />
      <el-table-column
        prop="SizeDetailId"
        align="center"
        :show-overflow-tooltip="true"
        label="标准尺寸"
        width="150"
      />
      <el-table-column
        prop="Status"
        align="center"
        :show-overflow-tooltip="true"
        label="状态"
        width="150"
      />
      <el-table-column
        prop="ProductPrintTypeId"
        align="center"
        :show-overflow-tooltip="true"
        label="打印类型"
        width="150"
      />
      <el-table-column
        prop="CutFilePath"
        align="center"
        :show-overflow-tooltip="true"
        label="切割文件"
        width="150"
      />
      <!-- <el-table-column
        prop="PVid"
        align="center"
        :show-overflow-tooltip="true"
        label="版本"
        width="150"
      /> -->
      <el-table-column
        prop="Weight"
        align="center"
        :show-overflow-tooltip="true"
        label="标准重量"
        width="150"
      />
      <el-table-column
        prop="SingleWeight"
        align="center"
        :show-overflow-tooltip="true"
        label="单P重量"
        width="150"
      />
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="TotalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!--新增    -->
    <el-dialog
      ref="addProductForm"
      title="新增"
      :close-on-click-modal="false"
      :visible.sync="dialogAddProductVisible"
      width="80%"
      @close="closeDialog"
    >
      <el-row :gutter="20">
        <el-form
          ref="addProductForm"
          :model="addProductForm"
          label-width="100px"
          :rules="rules"
        >
          <el-row :span="24">
            <el-col :span="8">
              <el-form-item label="产品名" prop="Name">
                <el-input v-model="addProductForm.Name" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="编码" prop="Code">
                <el-input v-model="addProductForm.Code" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="产品尺寸" prop="ProductSize">
                <el-input v-model="addProductForm.ProductSize" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :span="24">
            <el-col :span="8">
              <el-form-item label="切割文件" prop="CutFilePath">
                <el-input
                  v-model="addProductForm.CutFilePath"
                  placeholder="例如：D:\Temp\mz"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="标准重量" prop="Weight">
                <el-input v-model="addProductForm.Weight">
                  <template slot="append"
                    >kg</template
                  >
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="单P重量" prop="SingleWeight">
                <el-input v-model="addProductForm.SingleWeight">
                  <template slot="append"
                    >kg</template
                  >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="产品描述" prop="Describe">
            <el-col :span="24">
              <el-input v-model="addProductForm.Describe" />
            </el-col>
          </el-form-item>

          <el-col :span="24">
            <el-col :span="6">
              <el-form-item label="产品分类" prop="CategoricalId">
                <el-select
                  v-model="addProductForm.CategoricalId"
                  placeholder="请输入"
                >
                  <el-option
                    v-for="item in allList"
                    :key="item.CategoricalId"
                    :label="item.Name"
                    :value="item.CategoricalId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="输出类型" prop="ProductShopType">
                <el-select
                  v-model="addProductForm.ProductShopType"
                  placeholder="请输入"
                >
                  <el-option
                    v-for="item in ProductShopTypeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="尺寸" prop="SizeDetailId">
                <el-select
                  v-model="addProductForm.SizeDetailId"
                  placeholder="请输入"
                >
                  <el-option
                    v-for="item in allSize"
                    :key="item.SizeDetailId"
                    :label="item.Width + 'mm' + '*' + item.Height + 'mm'"
                    :value="item.SizeDetailId"
                  />
                </el-select>
                <!-- <el-input :disabled="true" style="width: 40%" /> -->
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="加工类型" prop="ProductPrintTypeId">
                <el-select
                  v-model="addProductForm.ProductPrintTypeId"
                  placeholder="请输入"
                >
                  <el-option
                    v-for="item in allProductPrintType"
                    :key="item.ProductPrintTypeId"
                    :label="item.Name"
                    :value="item.ProductPrintTypeId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>

          <el-col :span="24">
            <el-form-item label="产品类型" prop="ProductType">
              <div class="ml">
                <el-radio-group
                  v-model="addProductForm.ProductType"
                  @change="test"
                >
                  <el-radio :label="0">半成品</el-radio>
                  <el-radio :label="1">产品</el-radio>
                  <el-radio :label="2">组合产品</el-radio>
                </el-radio-group>
                <div v-if="addProductForm.ProductType == 0">
                  <div class="flex mt">
                    <div class="flex">
                      <el-select v-model="value" placeholder="请选择组件类型">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </div>
                    <div class="flex ml">
                      <el-input
                        v-model="search"
                        placeholder="请输入组件名称"
                        style="width: 200px;margin-right: 20px"
                        suffix-icon="el-icon-search"
                      />
                    </div>
                    <div class="flex">
                      <el-button type="primary">查询</el-button>
                    </div>
                  </div>
                </div>
                <div v-if="addProductForm.ProductType == 1">
                  <div class="flex mt">
                    <div class="flex">
                      <el-select v-model="value01" placeholder="请选择产品">
                        <el-option
                          v-for="item in options02"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </div>
                    <div class="flex ml">
                      <el-input
                        v-model="search01"
                        placeholder="请输入产品名称"
                        style="width: 200px;margin-right: 20px"
                        suffix-icon="el-icon-search"
                      />
                    </div>
                    <div class="flex">
                      <el-button type="primary">查询</el-button>
                    </div>
                  </div>
                </div>
                <div v-if="addProductForm.ProductType == 2">
                  <div class="flex mt">
                    <div class="flex">
                      <el-select v-model="value02" placeholder="请选择产品">
                        <el-option
                          v-for="item in options03"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </div>
                    <div class="flex ml">
                      <el-input
                        v-model="search02"
                        placeholder="请输入产品名称"
                        style="width: 200px;margin-right: 20px"
                        suffix-icon="el-icon-search"
                      />
                    </div>
                    <div class="flex">
                      <el-button type="primary">查询</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">取 消</el-button>
        <el-button type="primary" @click="dialogAddProductVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllList,
  getAllSize,
  getAllLine,
  getAllMaterialItem,
  getAllProductPrintType
} from "@/api/productInformation";

export default {
  name: "Baseproductinfo",
  components: {},
  data() {
    const WeightValidate = (rule, value, callback) => {
      const reg = /^\d+(\.\d+)?$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的重量"));
      }
    };
    return {
      search: "",
      search01: "",
      search02: "",
      value: "",
      value01: "",
      value02: "",
      allList: [],
      allSize: [],
      allLine: [],
      allMaterialItem: [],
      allProductPrintType: [],
      addProductForm: {
        Name: "",
        Code: "",
        CategoricalId: "",
        ProductShopType: "",
        ProductSize: "",
        Describe: "",
        SizeDetailId: "",
        ProductPrintTypeId: "",
        CutFilePath: "",
        Weight: "",
        SingleWeight: "",
        ProductType: 0
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        }
      ],
      options02: [
        {
          value: "选项1",
          label: "黄金糕02"
        },
        {
          value: "选项2",
          label: "双皮奶02"
        },
        {
          value: "选项3",
          label: "蚵仔煎02"
        }
      ],
      options03: [
        {
          value: "选项1",
          label: "黄金糕03"
        },
        {
          value: "选项2",
          label: "双皮奶03"
        },
        {
          value: "选项3",
          label: "蚵仔煎03"
        }
      ],
      ProductShopTypeOption: [
        { value: 1, label: "单输出" },
        { value: 2, label: "输出+内页侧" }
      ],
      ProductId: 0,
      dialogproductVisible: false,
      dialogAddProductVisible: false,
      // tableData: [],
      allList: [], // 分类列表
      size: 10,
      currentPage: 1, // 页码
      TotalNum: 0, // 数据总条数
      // size1: 10,
      // currentPage1: 1, //页码
      // TotalNum1: 0,
      tableData: [
        {
          ProductId: "12987122",
          Name: "好滋好味鸡蛋仔",
          Code: "江浙小吃、小吃零食",
          CategoricalId: "荷兰优质淡奶，奶香浓而不腻",
          ProductType: "上海市普陀区真北路",
          ProductShopType: "王小虎夫妻店",
          ProductSize: "10333",
          Describe: "12987122",
          CreateBy: "好滋好味鸡蛋仔",
          CreateTime: "江浙小吃、小吃零食",
          LastModifyBy: "荷兰优质淡奶，奶香浓而不腻",
          LastModifyTime: "上海市普陀区真北路",
          SizeDetailId: "王小虎夫妻店",
          Status: "10333",
          ProductPrintTypeId: "好滋好味鸡蛋仔",
          CutFilePath: "江浙小吃、小吃零食",
          PVid: "荷兰优质淡奶，奶香浓而不腻",
          Weight: "上海市普陀区真北路",
          SingleWeight: "王小虎夫妻店"
        },
        {
          ProductId: "1298712",
          Name: "好滋好味鸡蛋仔",
          Code: "江浙小吃、小吃零食",
          CategoricalId: "荷兰优质淡奶，奶香浓而不腻",
          ProductType: "上海市普陀区真北路",
          ProductShopType: "王小虎夫妻店",
          ProductSize: "10333",
          Describe: "12987122",
          CreateBy: "好滋好味鸡蛋仔",
          CreateTime: "江浙小吃、小吃零食",
          LastModifyBy: "荷兰优质淡奶，奶香浓而不腻",
          LastModifyTime: "上海市普陀区真北路",
          SizeDetailId: "王小虎夫妻店",
          Status: "10333",
          ProductPrintTypeId: "好滋好味鸡蛋仔",
          CutFilePath: "江浙小吃、小吃零食",
          PVid: "荷兰优质淡奶，奶香浓而不腻",
          Weight: "上海市普陀区真北路",
          SingleWeight: "王小虎夫妻店"
        }
      ],
      rules: {
        Name: [
          {
            required: true,
            message: "产品名称不能为空",
            trigger: ["change", "blur"]
          }
        ],
        Code: [
          {
            required: true,
            message: "产品编码不能为空",
            trigger: ["change", "blur"]
          }
        ],
        ProductSize: [
          {
            required: true,
            message: "产品尺寸不能为空",
            trigger: ["change", "blur"]
          }
        ],
        CutFilePath: [
          {
            required: true,
            message: "切割文件不能为空",
            trigger: ["change", "blur"]
          }
        ],
        Weight: [
          {
            required: true,
            message: "标准重量不能为空",
            trigger: ["change", "blur"]
          },
          { validator: WeightValidate }
        ],
        SingleWeight: [
          {
            required: true,
            message: "单P重量不能为空",
            trigger: ["change", "blur"]
          },
          { validator: WeightValidate }
        ],
        CategoricalId: [
          {
            required: true,
            message: "产品分类不能为空",
            trigger: ["change", "blur"]
          }
        ],
        ProductShopType: [
          {
            required: true,
            message: "输出类型不能为空",
            trigger: ["change", "blur"]
          }
        ],
        SizeDetailId: [
          {
            required: true,
            message: "尺寸不能为空",
            trigger: ["change", "blur"]
          }
        ],
        ProductPrintTypeId: [
          {
            required: true,
            message: "加工类型不能为空",
            trigger: ["change", "blur"]
          }
        ],
        ProductType: [
          {
            required: true,
            message: "产品类型不能为空",
            trigger: ["change", "blur"]
          }
        ]
      }
    };
  },
  created() {
    this.initdata();
  },
  methods: {

    test(value) {
      console.log(value, 560);
    },
    initdata() {
      getAllList().then(res => {
        if (parseInt(res.Code) === 1) {
          this.allList = res.Result;
          console.log(this.allList, 315);
        }
      });
      getAllSize().then(res => {
        if (parseInt(res.Code) === 1) {
          this.allSize = res.Result;
          console.log(this.allSize, 316);
        }
      });
      getAllLine().then(res => {
        if (parseInt(res.Code) === 1) {
          this.allLine = res.Result;
          console.log(this.allLine, 317);
        }
      });
      getAllMaterialItem().then(res => {
        if (parseInt(res.Code) === 1) {
          this.allMaterialItem = res.Result;
          console.log(this.allMaterialItem, 318);
        }
      });
      getAllProductPrintType().then(res => {
        if (parseInt(res.Code) === 1) {
          this.allProductPrintType = res.Result;
          console.log(this.allProductPrintType, 319);
        }
      });
    },

    test(value) {
      console.log(value);
      if (value == 0) {
        this.value01 = "";
        this.value02 = "";
        this.search01 = "";
        this.search02 = "";
      } else if (value == 1) {
        this.value = "";
        this.value02 = "";
        this.search = "";
        this.search02 = "";
      } else {
        this.value = "";
        this.value01 = "";
        this.search = "";
        this.search01 = "";
      }
    },
    forbidden() {},
    Enable() {},
    query() {},
    add() {
      this.value = "";
      this.value01 = "";
      this.value02 = "";
      this.search = "";
      this.search01 = "";
      this.search02 = "";
      this.addProductForm = {};
      this.dialogAddProductVisible = true;
    },
    edit() {},
    remove() {},
    closeDialog() {
      this.dialogAddProductVisible = false;
      this.$refs.addProductForm.resetFields();
    },
    // tip(row, column, event) {
    //   // console.log(row,column, event,308)
    //   this.dialogproductVisible = true;
    //   this.ProductId = row.ProductId;
    //   console.log(this.ProductId, 310);
    // },

    indexMethod(index) {
      // console.log(index, 288);
      // console.log(this.$parent, 289);
      return index + 1;
      // return index + 1 + (this.$parent.currentPage - 1) * this.$parent.size;
    },
    handleSizeChange(size) {
      this.size = size;
      // getTechPageList({ keyName:this.search,page:1,pageSize:this.size}).then(res => {
      //   if (parseInt(res.Code) === 1) {
      //     this.reset = res.Result.Items;
      //     this.TotalNum = res.Result.TotalNum
      //   }
      // })
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      // getTechPageList({ keyName:this.search,page:this.currentPage,pageSize:this.size}).then(res => {
      //   if (parseInt(res.Code) === 1) {
      //     this.reset = res.Result.Items;
      //     this.TotalNum = res.Result.TotalNum
      //   }
      // })
    }
  }
};
</script>

<style lang="scss" scoped>
.mt {
  margin-top: 20px;
}
.ml {
  margin-left: 20px;
}

.flex {
  display: flex;
}

.topBtn {
  height: 60px;
  width: 98%;
  margin: 0 auto;
  line-height: 60px;
  display: flex;
  justify-content: space-between;

  .icon-biang {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-bottom: 2px;
    background: url("./image/biangeng .png") no-repeat;
    vertical-align: middle;
  }

  .icon-setting {
    display: inline-block;
    width: 14px;
    height: 12px;
    margin-bottom: 2px;
    background: url("./image/shezhi.png") no-repeat;
    vertical-align: middle;
  }

  .icon-close {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 3px 2px 0;
    background: url("./image/jinyong.png") no-repeat;
    vertical-align: middle;
  }

  .icon-qiy {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 0 3px 2px 0;
    background: url("./image/qiyong.png") no-repeat;
    vertical-align: middle;
  }
}

// ul{
//   width:200px;
//   display:flex;
// }
// ul li{
//   width:100px;
//   height:40px;
//   background: #ccc;
//   display: inline-flex;
//   border-right:1px solid #ddd;
//   justify-content: center;
//   align-items: center;
//   cursor:pointer
// }
// ul li.active{
//  background:#0095ff;
//  color: #fff;
// }
.laytable {
  width: 98%;
  margin: 20px auto;
  border: 1px solid #eee;
}

.tab-container {
  margin: 30px;
  border: 1px solid #ebeef5;
  box-shadow: none;
}

.message {
  width: 98%;
  margin: 20px auto;
  height: auto;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  font-size: 14px;

  .character {
    margin: 20px 20px 21px 20px;
    line-height: 25px;
    color: #999999;

    .skip {
      color: #0095ff;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}

.block {
  text-align: right;
  margin: 28px 20px 0 0;
}
</style>
